<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorator="layout">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <style>
        td{
            word-break: break-all;
        }

    </style>
</head>
<body>
<!-- Begin Page Content -->
<div class="container-fluid mt-4" layout:fragment="content">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                搜索&添加
                <span id="operators_pack_btn" style="cursor: pointer"><i class="fas fa-angle-up"></i></span>
            </h6>
        </div>
        <div class="card-body" id="operators_panel">
            <!--<div id="operators_panel">-->
            <div class="row">

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon">用户名：</label>
                    <input class="form-control" type="text" id="username"/>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon" >请求URL：</label>
                    <input class="form-control" type="text" id="aurl"/>
                </div>
            </div>




            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon" >操作名称：</label>
                    <input class="form-control" type="text" id="operatename"/>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon" >操作描述：</label>
                    <input class="form-control" type="text" id="description"/>
                </div>
            </div>


            <div class="row screen-group">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon" >开始时间：</label>
                    <input id="beginTime" type="datetime-local"  class="form-control" value="2015-01-01T00:00"/>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon" >结束时间：</label>
                    <input id="endTime" type="datetime-local"  class="form-control" value="2015-01-01T00:00"/>
                </div>

            </div>

            <div class="row screen-group">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <label class="input-group-addon" >访问IP：</label>
                    <input class="form-control" type="text" id="aip"/>
                </div>

                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 right-group">
                    <button type="button" class="btn btn-primary btn-block btn-bottom" id="searchBt">搜索</button>
                </div>

            </div>
                <!--<div class="row">-->
                    <!--<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">-->
                        <!--<label for="rid">角色权限</label>-->
                        <!--<select class="form-control" id="rid">-->
                            <!--<option value="-1">全部</option>-->
                            <!--<th:forEach var="role" items="${rolelist}">-->
                                <!--<option value="${role.id}">${role.description}</option>-->
                            <!--</th:forEach>-->
                        <!--</select>-->
                    <!--</div>-->
                    <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">-->
                        <!--<button type="button" class="btn btn-secondary btn-block btn-bottom" name="add">新增</button>-->
                    <!--</div>-->
                    <!--<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 form-group">-->
                        <!--<button type="button" class="btn btn-primary btn-block btn-bottom" id="searchBt">搜索</button>-->
                    <!--</div>-->
                <!--</div>-->
        </div>
    </div>

    <!--数据-->
    <!-- DataTales Example -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                数据
                <!--<a href="#" style="float:right;font-weight: normal;">下载</a>-->
                <button id="exportExcelBt" type="button" class="btn btn-link" style="float:right;font-weight: normal;">导出</button>
            </h6>

        </div>
        <div class="card-body">
            <div class="table-responsive" id="data">
            </div>
        </div>
    </div>

    <ul style="display: none" id="operationNames">
        <li th:each="operationName:${operationNames}" th:text="${operationName}"></li>
    </ul>
</div>

<th:block layout:fragment="js">
    <script th:src="@{/component/customized/jsPingYin.js}"></script>
    <script th:src="@{/component/customized/inputChangeVague.js}"></script>
    <script type="text/javascript">
        $(function () {
            $("#operators_pack_btn").click(function () {
                if ($("#operators_panel").is(":hidden")) {
                    $("#operators_panel").show(100);
                    $(this).html("<i class=\"fas fa-angle-up\"></i>");
                } else {
                    $("#operators_panel").hide(100);
                    $(this).html("<i class=\"fas fa-angle-down\"></i>");
                }
            });

            // var operationNames =new Array();
            // $("#operationNames li").each(function () {
            //     operationNames.push({'name':$(this).text()});
            // })
            //$("#operatename").initInputChange(operationNames,"name","name");
        });

        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth() + 1;
        month = month < 10 ? ("0" + month) : month;
        var dt = d.getDate();
        dt = dt < 10 ? ("0" + dt) : dt;
        var hours = d.getHours();
        var startT = year+"-"+month+"-"+dt+"T"+"00:00";
        var hh = hours< 10 ? ("0" + hours): hours;
        var mi = d.getMinutes();

        var mm = mi< 10 ? ("0"+ mi):mi + 5;
        var nowt = "";
        nowt += year+"-"+month+"-"+dt+"T"+hh+":"+mm;
        $(function(){
            $("#beginTime").val(startT);
            $("#endTime").val(nowt);
            $("#searchBt").click(function(){
                search();
            });
            try{
                if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                    $(".glyphicon.glyphicon-remove.form-control-feedback.right-add-prompt.has-success.remove-date").
                    click(function(){
                        $(this).prev().val("");
                    })
                }else{
                    $(".glyphicon.glyphicon-remove.form-control-feedback.right-add-prompt.has-success.remove-date").hide();
                }
            }catch(e){}
            search();
            $("#username ").keyEnterEvent(search);
            $("#aurl ").keyEnterEvent(search);
            $("#operatename ").keyEnterEvent(search);
            $("#description ").keyEnterEvent(search);
            $("#aip").keyEnterEvent(search);

            $("#exportExcelBt").click(function(){
                exportExcel();
            });
        });

        function exportExcel() {
            var params="1";
            params+="&username="+$("#username").val();
            params+="&aurl="+$("#aurl").val();
            params+="&operatename="+$("#operatename").val();
            params+="&description="+$("#description").val();
            params+="&aip="+$("#aip").val();
            params+="&beginTime="+$("#beginTime").val();
            params+="&endTime="+$("#endTime").val();

            var url="[[@{/system/logger/exportExcel}]]?"+params;
            window.open(url);
        }

        function search(){
            var data={
                username:$("#username").val(),
                aurl:$("#aurl").val(),
                operatename:$("#operatename").val(),
                description:$("#description").val(),
                aip: $("#aip").val(),
                beginTime:$("#beginTime").val(),
                endTime:$("#endTime").val(),
                _csrf:csrfToken
//        max:10
            };
            $("#data").datagrid("load",{
                url:"[[@{/}]]system/logger/search",
                data:data,
                showDetail:true,
                colResizeEnable:true,
                fields:[
                    {name:"id",autoHidden:true,text:"编号",inTable:false},
                    {name:"userid",autoHidden:true,text:"用户编号",inTable:false},
                    {name:"username",autoHidden:false,text:"用户名",inTable:true},
                    {name:"operatename",autoHidden:false,text:"操作名称",inTable:true},
                    {name:"description",autoHidden:true,text:"操作描述",inTable:true},
                    {name:"aip",autoHidden:true,text:"访问IP",inTable:false},
                    {name:"atime",autoHidden:true,text:"操作时间",inTable:true,render:function(row){
                            var d = new Date(row.atime);
                            var str = "";
                            str += d.toLocaleDateString();
                            str += d.toLocaleTimeString();
                            return str;

                        }},
                    {name:"aurl",autoHidden:true,text:"请求URL",inTable:false},
                    {name:"aparams",autoHidden:false,text:"请求参数",inTable:false},
                    {name:"browser",autoHidden:false,text:"浏览器",inTable:true}
                ],
                dialogTitle:"操作日志",
                webContext:'[[@{/}]]',
                operations:[]
            });
        }
    </script>
</th:block>
</body>
</html>